import React, {useEffect, useState} from 'react';
import {
  ScrollView,
  View,
  Text,
  TouchableOpacity,
  ActivityIndicator,
  FlatList,
  Image,
  TextInput,
} from 'react-native';
import BaseUrl from '../../config/BaseUrl';
import {useNavigation} from '@react-navigation/native';
import AreaView from '../../components/Layout/AreaView';
import styles from './style';
import Score from '../../utils/Score';
import {custDetail, listByClassif} from '../../service/home';

let reg = /<\/?.+?\/?>/g;

const StarTeacherDetail = (props) => {
  const {
    route: {
      params: {custId},
    },
  } = props;

  const navigation = useNavigation();
  const [custData, setCustData] = useState({});
  const [classList, setClassList] = useState([]);

  useEffect(() => {
    custDetail(custId).then((res) => {
      console.log(res);
      setCustData(res.data);
    });

    // 推荐课程
    listByClassif({ps: 3, teacherId: custId, courseClassif: ''}).then((res) => {
      console.log(res);
      setClassList(res.rows);
    });
  }, [navigation]);

  return (
    <AreaView>
      <ScrollView style={styles.container}>
        <Image
          style={styles.banner}
          source={{uri: BaseUrl.imgurl + custData.image}}
        />
        <View style={styles.content}>
          <Text style={styles.name}>{custData.nickName}</Text>
          <View style={styles.star}>
            {Score(custData.teacherLevel)?.map((s) => (
              <Image style={styles.icon} source={s} />
            ))}
          </View>
          <Text style={styles.desc}>
            <Text style={styles.desc_mark}>简介文字：</Text>
            {custData?.custDesc?.replace(reg, '')}
          </Text>
        </View>
        <View style={styles.gap} />
        <View style={styles.course_head}>
          <Image
            style={styles.head_icon}
            source={require('../../assets/images/starTeacher/like.png')}
          />
          <Text style={styles.head_title}>老师课程推荐</Text>
        </View>
        <ScrollView showsHorizontalScrollIndicator={false} horizontal={true}>
          {(classList || []).map((item) => (
            <TouchableOpacity
              style={styles.list}
              key={item.courseId}
              onPress={() => {
                navigation.push('CouseDetail', {
                  courseId: item.courseId,
                });
              }}>
              <Image
                style={styles.cover}
                source={{uri: BaseUrl.imgurl + item?.courseImage}}
              />
              <Text style={styles.money}>￥{item?.coursePrice}</Text>
              <Text style={styles.info} numberOfLines={2}>
                {item.courseTitle}
              </Text>
            </TouchableOpacity>
          ))}

          {/* <TouchableOpacity  activeOpacity={1} style={styles.list}>
            <Image style={styles.cover} />
            <Text style={styles.money}>￥3888</Text>
            <Text style={styles.info} numberOfLines={2}>文字描述文字描述文字描述文字描述文字描述文字描述文...</Text>
          </TouchableOpacity> */}
        </ScrollView>
      </ScrollView>
    </AreaView>
  );
};

export default StarTeacherDetail;
